<template>
    <div class="Note" ref="Note" @scroll="binScroll">
        <div class="notebox" ref="notebox">
        <waterfall :col="2" :data="data" :gutterWidth="10">
            <template>
                <span v-for="(item,i) in data" :key="i+'c'">
                    <div class="noteItem" v-if="item.type === 1">
                        <img :src="item.note.image_u" :lazy-src="item.note.image_u" alt="" @click="bint3(item.note.id)" >
                        <div class="itemCont">
                            <div class="topTitle">
                                {{item.note.title}}
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <img :src="item.note.author.p" alt="" @click="binuser(item.note.author.id)">
                                    <div>&nbsp;{{item.note.author.n}}</div>
                                </div>
                                <div class="canyv">
                                    <img :src="tubiao.weidianzan" alt="" :id="i" data-tubiao=false @click="bintubiao" >
                                    <div>&nbsp;{{item.note.like_count}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </span>
            </template>
        </waterfall>
        </div>
    </div>
</template>

<script>
    export default {
        name:'Note',
        data() {
            return {
                topics:[],
                data:[],
                timer:0,
                dataSum:0,
                width:0,
                tubiao:{
                    dianzan: require("../assets/已点赞.png" ),
                    weidianzan: require("../assets/未点赞.png" )
                },
                
            }
        },
        async created(){
            await this.axios.get('https://apis.netstart.cn/douguo/home/notes/0/10'). then((response) => {
                if (response.data.state=== "success") {
                    this.topics = response.data.result.topics
                    this.data = response.data.result.list
                }
            })
        },
        methods:{
            binScroll(){
                let length = this.data.length
                clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    if (this.$refs.notebox.scrollHeight-this.$refs.Note.scrollTop===this.$refs.Note.clientHeight) {
                        this.axios.get(`https://apis.netstart.cn/douguo/home/notes/${length}/10`). then((response) => {
                        this.data.push(...response.data.result.list) 
                        // this.render()
                        })
                    }
                },300)
            },
            bintubiao(e){
                if(e.target.dataset.tubiao==='true'){
                    e.target.src = this.tubiao.weidianzan
                    e.target.dataset.tubiao='false'
                    this.data[e.target.id].note.like_count -= 1

                }else{
                    e.target.src = this.tubiao.dianzan
                    e.target.dataset.tubiao='true'
                    this.data[e.target.id].note.like_count += 1
                }
            },
            bint3(id){
                this.$router.push({name:'type3',query:{id}})
            },
            binuser(id){
                this.$router.push({name:'user',query:{id}})
            }
        }
    }
</script>

<style lang="less">
    .Note{
        width: 100%;
        height: calc(100vh - 100px);
        overflow: auto;
        padding: 0 20px;
        box-sizing: border-box;
        .notebox{
            width: 100%;
            padding-top: 10px;
            display: flex;
            justify-content: space-between;
            .vue-waterfall-column{
                padding: 0 5px;
                box-sizing: border-box;
            }
            .noteboxleft{
                width: 49%;
                
            }
            .noteboxright{
                width: 49%;
            }
            .noteItem{
                // padding: 0 5px;
                background-color: whitesmoke;
                margin-bottom: 10px;
                border-radius: 10px;
                overflow: hidden;
                break-inside: avoid;
                >img{
                    width: 100%;
                    border-radius: 10px;
                }
                .itemCont{
                    .topTitle{
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        margin-top: 5px;
                    }
                    .bottom{
                        margin-top: 10px;
                        display: flex;
                        height: 20px;
                        justify-content: space-between;
                        .left{
                            display: flex;
                            align-items: center;
                            img{
                            height: 100%;
                            border-radius: 50%;
                            >div{
                                display: -webkit-box;
                                -webkit-line-clamp: 1;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                            }
                        }
                        }
                        .canyv{
                            display: flex;
                            align-items: center;
                            img{
                            height: 90%;
                        }
                        }
                    }
                }
            }
        }
    }
</style>